/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Input, Tree, DatePicker, Button, Icon, Slider } from 'antd';
import MyTable from '../../components/common/MyTable';
import request from '../../utils/request';
import PublicService from '../../services/PublicService';
const Search = Input.Search;
const { TreeNode } = Tree;
import style from './GasSave.less';
const xc = require("../../assets/xc.png")
const blueCar = require("../../assets/blueCar.svg")
const gasCar = require("../../assets/gasCar.svg")
const orangeCar = require("../../assets/orangeCar.svg")
const ButtonGroup = Button.Group;
var marker, lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];
class GasSave extends Component {

    constructor(props) {
        super(props)


        this.state = {
            treeData: [
                {
                  children: [
                    {
                      children: [
                        {
                          children: [
                            {
                              pid: "#1燃气站",
                              title: "张三",
                              value: "张三"
                            },
                            {
                              pid: "#1燃气站",
                              title: "李四",
                              value: "李四"
                            }
                          ],
                          pid: "#1企业",
                          title: "#1燃气站",
                          value: "#1燃气站"
                        },
                        {
                          children: [
                            {
                              pid: "#2燃气站",
                              title: "王五",
                              value: "王五"
                            },
                            {
                              pid: "#2燃气站",
                              title: "李四",
                              value: "李四"
                            }
                          ],
                          pid: "#1企业",
                          title: "#2燃气站",
                          value: "#2燃气站"
                        }
                      ],
                      pid: "全部",
                      title: "#1企业",
                      value: "#1企业"
                    },
                    {
                      children: [
                        {
                          children: [
                            {
                              pid: "#3燃气站",
                              title: "田七",
                              value: "田七"
                            },
                            {
                              pid: "#3燃气站",
                              title: "王九",
                              value: "王九"
                            }
                          ],
                          pid: "#2企业",
                          title: "#3燃气站",
                          value: "#3燃气站"
                        }
                      ],
                      pid: "全部",
                      title: "#2企业",
                      value: "#2企业"
                    }
                  ],
                  pid: "0",
                  title: "全部",
                  value: "全部"
                }
              ],
            marks: {
                0: "0%",
            },
            loading: false,
            dataSource: [],
            pageIndex: 1,
            pageSize: 10,
            columns: [
               
               
                {
                    title: "车牌号",
                    dataIndex: 'plateNumber',
                    width: '13%',
                    align: "center",
                    render: (text) => <span>{text ? text : '/'}</span>
                },
               
                {
                    title: "速度(km/h)",
                    dataIndex: 'speed',
                    width: '15%',
                    align: "center",
                },
                {
                    title: '上报时间',
                    dataIndex: 'reportTime',
                    width: '8%',
                    align: "center",
                },
                {
                    title: '参考位置',
                    dataIndex: 'referencePosition',
                    width: '8%',
                    align: "center",
                },
             

            ]

        }



    }

    componentDidMount() {
        this.initThree()
        this.save()
    }

   

    initThree = () => {


        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.397428, 39.90923],
            zoom: 17
        });
        marker = new AMap.Marker({
            map: map,
            position: [116.478935, 39.997761],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: -90,
        });

        // 绘制轨迹
        var polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir: true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });


        marker.on('moving', function (e) {
            passedPolyline.setPath(e.passedPath);
        });

        map.setFitView();





        function resumeAnimation() {
            marker.resumeMove();
        }



    }
    //开始的动画
    startAnimation = () => {
        marker.moveAlong(lineArr, 200);
    }
    //暂停动画
    pauseAnimation = () => {
        marker.pauseMove();
    }

    stopAnimation = () => {
        marker.stopMove();
    }

    onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
    }

    onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
    }
    save = (v) => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getCourierName',
            method: 'POST',
            data: { name: v ? v : "" }
        }).then(data => {
            console.log(data)
            this.setState({
                treeData: data.ret.resultList
            })
        })
    }
    //开始按钮
    onplay = () => {
        this.startAnimation()
    }
    //暂停按钮
    onover = () => {
        this.pauseAnimation()
    }

    onCheck = (checkedKeys, v) => {
        console.log('onCheck', checkedKeys, v.checkedNodes);

        let arr = []
        v.checkedNodes.forEach((item) => {
            if (item.props.value) {
                arr.push(item.props.value)
            }
        })

        setTimeout(() => {

            this.setState({
                nameArr: arr
            })
        }, 500)


    }

    onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({ selectedKeys });
    }

    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.title} key={item.key} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })


    onSearch = (v) => {
        console.log(v)
        this.save(v)
    }

    onsave = () => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getHistoricalMonitoring',
            method: 'POST',
            data: { name:"张三",takeTimeEnd:"1",takeTimeStart:"2" }
        }).then(data => {
            if(data.rc == 0) {
                this.setState({
                    dataSource:data.ret.resultList
                })
            }
        })
    }


    render() {
        const { marks, loading, selectedRowKeys, dataSource, pageIndex, pageSize, treeData } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '60vh';
        if (windowWidth > 1367) {
            containerHeight = '74vh';
        }
        return (
            <div>
                {/* <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col>钢瓶配送监管 >> 历史查询</Col>
                    </Row>
                </Card> */}
                <Row>
                    <Col span={6}>
                        <Card className={style.left_box}
                            bodyStyle={{ padding: "3px 24px" }}
                        >
                            <Search
                                size="small"
                                placeholder="请输入"
                                onSearch={value => console.log(value)}
                                enterButton
                            />
                            <Tree

                                // checkable
                                // defaultExpandAll={true}
                                defaultExpandedKeys={["0-0"]}
                                onCheck={this.onCheck}
     
                            >
                                {this.renderTreeNodes(treeData)}
                            </Tree>
                        </Card>

                        <Card className={style.left_box2} bodyStyle={{ padding: "3px 24px" }}>
                            <Col span={24} style={{ borderBottom: "1px solid #ccc", paddingBottom: 3 }}> <i className={style.iCie}></i>时间选取</Col>

                            <Col span={24} style={{ margin: "10px 0px", textAlign: "center" }}><DatePicker size="small" style={{ width: 200 }} placeholder="请输入开始时间" /> </Col>

                            <Col span={24} style={{ textAlign: "center" }}><DatePicker size="small" style={{ width: 200 }} placeholder="请输入结束时间" /> </Col>

                            <Col span={24} style={{ textAlign: "center", marginTop: 10 }}><Button size="small" style={{ width: 200 }} type="primary" onClick={this.onsave}>查询</Button> </Col>

                            {/* <Col span={24} style={{ borderBottom: "1px solid #ccc", paddingBottom: 3 }}> <i className={style.iCie}></i>时间选取</Col> */}

                        </Card>

                        <Card className={style.left_box} bodyStyle={{ padding: "3px 24px" }}>
                            <Col span={24} style={{ borderBottom: "1px solid #ccc", paddingBottom: 3 }}> <i className={style.iCie}></i>播放设置</Col>
                            <Col span={24} style={{ margin: "10px 0px", textAlign: "center" }}>
                                <ButtonGroup style={{ boxShadow: "rgba(136, 136, 136, 0.15) -1px 5px 4px 0px" }}>
                                    <Button size="small" style={{ height: 30 }} onClick={this.onplay}><Icon type="caret-right" />播放</Button>
                                    <Button size="small" style={{ height: 30 }} onClick={this.onover}><Icon type="pause" />暂停</Button>
                                    <Button size="small" style={{ height: 30 }} onClick={this.onover}><Icon type="play-circle" />停止</Button>

                                </ButtonGroup>
                            </Col>

                            <Col style={{ margin: "10px 0px" }}>速度</Col>

                            <Col style={{ textAlign: "center" }}>
                                <Slider marks={marks} />
                            </Col>

                            <Col style={{ margin: "10px 0px" }}>进度</Col>

                            <Col style={{ textAlign: "center" }}>
                                <Slider marks={marks} />
                            </Col>





                        </Card>
                    </Col>

                    <Col span={18}>
                        <Card className={style.right_Tbox}
                            id="container"
                            bodyStyle={{ padding: "3px 24px" }}
                        >
                        </Card>
                        <Card className={style.right_Bbox}
                            bodyStyle={{ padding: "3px 24px" }}
                        >
                            {/* <Row>
                                <Col span={4}><img src={blueCar} style={{ display: "inline-block", width: "16px" }} />行驶在线 : (XXX)</Col>
                                <Col span={4}><img src={orangeCar} style={{ display: "inline-block", width: "16px" }} />停车在线 : (XXX)</Col>
                                <Col span={4}><img src={gasCar} style={{ display: "inline-block", width: "16px" }} />离线 : (XXX)</Col>
                            </Row> */}
                            <MyTable
                                // bordered
                                loading={loading}
                                columns={this.state.columns}
                                // rowSelection={rowSelection}
                                pagination={false}
                                // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                                dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                            />

                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default (GasSave);
